<template>
  <div>
    <!-- slot触发器 -->
    <div @click="open = true">
      <slot :date="date" />
    </div>

    <!-- 隐藏但不破坏上下文 -->
    <a-date-picker
        v-model:value="date"
        v-model:open="open"
        style="position: absolute; opacity: 0; pointer-events: none;"
        @openChange="handleOpenChange"
        @change="handleChange"
    />
  </div>
</template>

<script setup>
import {ref} from "vue";

const props = defineProps({
  modelValue: {
    type: [Object, String, null],
    default: null
  }
});
const emit = defineEmits(["update:modelValue", "change", "search"]);

const date = ref(props.modelValue);
const open = ref(false);

const handleOpenChange = (status) => {
  open.value = status;
};

const handleChange = (val) => {
  emit("update:modelValue", val);
  emit("change", val);
  emit("search", val); // ✅ 用户修改时才触发
};
</script>
